<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="upload/css.css" rel="stylesheet" type="text/css">
<link href="upload/font_icon/fontawesome.css" rel="stylesheet" type="text/css">
<script src="upload/js/jquery.js"></script>
<script>
	function disp_confirm(i,j){		//确认对话框
		var r=confirm(i)
		if (r==true){location.replace(j);}
	}
</script>
<title>很漂亮的配置页面</title>
<style>
* {
	padding: 0px;
	margin: 0px;
}

a {
	color: White
}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
}

img {
	border: 0;
}

.lg {
	width: 468px;
	height: 468px;
	margin: 100px auto;
	background:
		url(http://keleyi.com/keleyi/phtml/divcss/21/images/login_bg.png)
		no-repeat;
}

.lg_top {
	height: 300px;
	width: 468px;
}

.lg_main {
	width: 400px;
	height: 80px;
	margin: 0 25px;
	text-align:center;
}

.lg_m_1 {
	width: 290px;
	height: 100px;
	padding: 60px 55px 20px 55px;
}

.pw {
	height: 37px;
	border: 0;
	color: #666;
	width: 236px;
	margin: 4px 28px;
	background:
		url(http://keleyi.com/keleyi/phtml/divcss/21/images/password.png)
		no-repeat;
	padding-left: 10px;
	font-size: 16pt;
	font-family: Arial, Helvetica, sans-serif;
}

.bn {
	width: 330px;
	height: 72px;
	background:
		url(http://keleyi.com/keleyi/phtml/divcss/21/images/enter.png)
		no-repeat;
	border: 0;
	display: block;
	font-size: 18px;
	color: #FFF;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bolder;
}

.lg_foot {
	height: 80px;
	width: 330px;
	padding: 6px 68px 0 68px;
}
</style>
</head>

<body class="b">

	<div class="lg">
			<div class="lg_top"></div>
			<div class="lg_main">
			    <h3>中国电商百家城市数据录入</h3><br>
			    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="but_span">手工录入</span>
			    <span class="but_span file_excel">EXCEL文件导入</span>
                
                	<div class="win"></div>
                	<div class="windiv">
                		<div class="wintit"><b>标题</b><span class="icon-remove"></span></div>
                		<div class="winhtml"></div>
                	</div>
                	
                	<div class="excel_html" style="display:none;">
                		<div style="padding:35px 0;">文件选择：<span class="but_span select_file"><span class="icon-upload-alt"></span> EXCEL 文件上传</span></div>
                		<div style="font:12px/22px 微软雅黑；">
                			<b>导入数据说明：</b><br>
                			1、每次上传数据将被更新；<br>
                			2、请根据提供的excel模板调整原始数据并上传，并保留第一行为标题栏，如果格式错误，数据不会被导入！<br>
                			<a href="upload/模板-中国电商百家城市.xlsx" style="color:#099;"><span class="icon-chevron-sign-down"></span> 下载excel模板</a>
                		</div>
                	</div>
                	
                	<div style="display:none;">
                		<form action = "index.php" method = "POST" encType = "multipart/form-data">  
                		<input type = "file" name = "img" onchange="selectImage();"><br>  
                		<input type = "submit" name = 'submit'>  
                		</form>
                	</div>
			</div>
	</div>
	
<script>
	$(function(){
		$('.wintit span').click(function(){
			$('.win').hide();
			$('.windiv').slideToggle();
			$('.winhtml').html('');
		})
	})
</script>
	
<script>
	$('.file_excel').click(function(){
		$('.win').show();
		$('.windiv').css({'width':'500px','height':'300px','margin':'-200px 0 0 -250px'});
		var excel_html = $('.excel_html').html();
		$('.wintit b').html('数据导入');
		$('.winhtml').html(excel_html);
		$('.windiv').slideToggle();
	})
	
	function selectImage(){
		var f_name = $('input[name=img]').val().toLowerCase();
		var f_type = f_name.substr(f_name.lastIndexOf('.'));
		if( f_type == '.xls' || f_type == '.xlsx' ){
			$('input[name=submit]').click();
		}else{alert('请选择EXCEL文件。');}
	}
	$(function(){
		$('.winhtml').on('click', '.select_file', function(){
			$('input[name=img]').click();
			$('.windiv').hide();
		})
	})
</script>
</body>
</html>